<!DOCTYPE html>
<html lang="en">

<head>
    <title>three.js webgl - FBX loader</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="main.css">
</head>

<body>
    <div id="info">
        <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - FBXLoader<br />
        Character and animation from <a href="https://www.mixamo.com/" target="_blank" rel="noopener">Mixamo</a>
    </div>

    <!-- Import maps polyfill -->
    <!-- Remove this when import maps will be widely supported -->
    <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

    <script type="importmap">
			{
				"imports": {
					"three": "/node_modules/three/build/three.module.js"
				}
			}
		</script>

    <script type="module">

        import * as THREE from 'three';

        import Stats from '/node_modules/three/examples/jsm/libs/stats.module.js';

        import { OrbitControls } from '/node_modules/three/examples/jsm/controls/OrbitControls.js';
        import { FBXLoader } from '/node_modules/three/examples/jsm/loaders/FBXLoader.js';

        let camera, scene, renderer, stats;

        const clock = new THREE.Clock();

        let mixer;

        init();
        animate();

        function init() {

            const container = document.createElement('div');
            document.body.appendChild(container);

            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
            camera.position.set(100, 200, 300);

            scene = new THREE.Scene();
            scene.background = new THREE.Color(0xa0a0a0);
            scene.fog = new THREE.Fog(0xa0a0a0, 200, 1000);

            const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
            hemiLight.position.set(0, 200, 0);
            scene.add(hemiLight);

            const dirLight = new THREE.DirectionalLight(0xffffff);
            dirLight.position.set(0, 200, 100);
            dirLight.castShadow = true;
            dirLight.shadow.camera.top = 180;
            dirLight.shadow.camera.bottom = - 100;
            dirLight.shadow.camera.left = - 120;
            dirLight.shadow.camera.right = 120;
            scene.add(dirLight);

            // scene.add( new THREE.CameraHelper( dirLight.shadow.camera ) );

            // ground
            const mesh = new THREE.Mesh(new THREE.PlaneGeometry(2000, 2000), new THREE.MeshPhongMaterial({ color: 0x999999, depthWrite: false }));
            mesh.rotation.x = - Math.PI / 2;
            mesh.receiveShadow = true;
            scene.add(mesh);

            const grid = new THREE.GridHelper(2000, 20, 0x000000, 0x000000);
            grid.material.opacity = 0.2;
            grid.material.transparent = true;
            scene.add(grid);

            // model
            const loader = new FBXLoader();
            loader.load('/data/model/robot.FBX', function (object) {


                scene.add(object);

            });

            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.shadowMap.enabled = true;
            container.appendChild(renderer.domElement);

            const controls = new OrbitControls(camera, renderer.domElement);
            controls.target.set(0, 100, 0);
            controls.update();

            window.addEventListener('resize', onWindowResize);

            // stats
            stats = new Stats();
            container.appendChild(stats.dom);

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize(window.innerWidth, window.innerHeight);

        }

        //

        function animate() {

            requestAnimationFrame(animate);

            const delta = clock.getDelta();

            if (mixer) mixer.update(delta);

            renderer.render(scene, camera);

            stats.update();

        }

    </script>

</body>

</html>